<template>
    <div class="video-middle" v-bind:class="{'video-screen-full':isScreenFull}">
        <div class="video-middle-left" v-bind:class="{'video-screen-full':isScreenFull}">
            <div class="video-middle-left-shipin" v-bind:class="{'video-screen-full':isScreenFull}">

                <div style="color:black;width:100%;height:50px;box-shadow: 0 0 8px #e5e9ef;" v-if="!isScreenFull">
                    <div style="float:left;width:100%;height:30px;line-height:30px;padding-left:10px;">
                        <span style="color:#212121;font-size:16px;">{{videoTitle}}</span>
                    </div>
                    <div style="float:left;width:100%;height:20px;line-height:12px;padding-left:10px;">
                        <span style="color:#999999;font-size:12px;">音乐 > 翻唱 2020-02-25 12:00:02</span>
                    </div>
<!--                    <div style="float:left;width:calc(100% - 290px);line-height:50px;height:50px;">-->
<!--                        <el-input @keyup.enter.native="danmuShoot" placeholder="请输入你想要发送的弹幕内容" v-model="danmuContent" class="input-with-select">-->
<!--                            <el-button slot="append" icon="el-icon-search" @click="danmuShoot"></el-button>-->
<!--                        </el-input>-->
<!--                    </div>-->
                </div>

                <VideoWithDanmu @sliderValueChange="sliderValueChange" @doChangeScreenStatus="doChangeScreenStatus"></VideoWithDanmu>

                <div style="color:black;width:100%;height:50px;box-shadow: 0 0 8px #e5e9ef;" v-if="!isScreenFull">
                    <div style="float:left;width:280px;height:50px;line-height:50px;text-align:center">
                        在线：<span style="color:#505050;font-weight: bold">732</span> 人，弹幕：<span style="color:#505050;font-weight: bold">988</span> 条
                    </div>
                    <div style="float:left;width:calc(100% - 290px);line-height:50px;height:50px;">
                        <el-input @keyup.enter.native="danmuShoot" placeholder="请输入你想要发送的弹幕内容" v-model="danmuContent" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="danmuShoot"></el-button>
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="video-middle-left-pinglun" v-if="!isScreenFull">

                <!--分页顶部效果-->
                <el-pagination style="margin:20px 0 10px 60px;"
                               background
                               layout="total,prev, pager, next"
                               :page-size="10"
                               :total="1000">
                </el-pagination>

                <!--写死一个评论模块-->
                <ChaosUserDiscussInput></ChaosUserDiscussInput>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <ChaosUserDiscuss></ChaosUserDiscuss>
                <div style="width:100%;float:left;">
                    <!--页面底部分页效果-->
                    <el-pagination style="margin:0 0 60px 60px;"
                                   background
                                   layout="total,prev, pager, next"
                                   :page-size="10"
                                   :total="1000">
                    </el-pagination>
                </div>





            </div>
        </div>
        <div class="video-middle-right" v-if="!isScreenFull">
            <div class="video-middle-right-user-danmu-shipin">
                <VideoUserInfo></VideoUserInfo>
                <VideoDanmuGroup></VideoDanmuGroup>
                <VideoGroup></VideoGroup>
            </div>
            <div class="video-middle-right-xiangguantuijian">
                <h3 style="margin-left:10px;color:#333333">相关视频推荐</h3>
                <div style="margin-left:10px;margin-top:10px;margin-bottom:20px;">
                    <HotspotRank v-if="res.length>0" :video-info="res[0]"></HotspotRank>
                    <HotspotRank v-if="res.length>1" :video-info="res[1]"></HotspotRank>
                    <HotspotRank v-if="res.length>2" :video-info="res[2]"></HotspotRank>
                    <HotspotRank v-if="res.length>3" :video-info="res[3]"></HotspotRank>
                    <HotspotRank v-if="res.length>4" :video-info="res[4]"></HotspotRank>
                    <HotspotRank v-if="res.length>5" :video-info="res[5]"></HotspotRank>
                    <HotspotRank v-if="res.length>6" :video-info="res[6]"></HotspotRank>
                    <HotspotRank v-if="res.length>7" :video-info="res[7]"></HotspotRank>
                    <HotspotRank v-if="res.length>8" :video-info="res[8]"></HotspotRank>
                    <HotspotRank v-if="res.length>9" :video-info="res[9]"></HotspotRank>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import VideoWithDanmu from '@/components/video/videoWithDanmu'
    import VideoDanmuGroup from '@/components/video/videoDanmuGroup'
    import VideoGroup from '@/components/video/videoGroup'
    import VideoUserInfo from '@/components/video/videoUserInfo'
    import HotspotRank from "@/components/reportThird/hotspotRank";
    import ChaosUserDiscussInput from "@/components/pinglun/chaosUserDiscussInput"
    import ChaosUserDiscuss from "@/components/pinglun/chaosUserDiscuss"

    export default {
        name: "videoMiddle",
        components:{VideoWithDanmu,VideoDanmuGroup,VideoGroup,VideoUserInfo,HotspotRank,ChaosUserDiscussInput,ChaosUserDiscuss},
        data(){
            return{
                isScreenFull:false,
                danmuContent:'',
                sliderValue:0,
                videoTitle:'',
                res:[],
                paigangbangForm:{
                    fenquParent:'',
                    is1day:'1',
                    is3day:'0',
                    is7day:'0'
                }
            }
        },
        mounted(){
            var localStorage = window.localStorage;
            var videoTitle = localStorage.getItem("videoTitle");
            this.videoTitle = videoTitle;

            var self = this;
            self.paigangbangForm.fenquParent = "01-fanju";
            //查找动漫区前11的视频
            self.$api.post('paihangbang/getPaihangbangTop11',self.paigangbangForm, result => {
                self.res = result;
            });

            // console.log(this.videoName);
            // debugger;
        },
        methods:{
            sliderValueChange(newValue){
                this.sliderValue = newValue;
            },

            danmuShoot(){
                //发射弹幕方法
                var localStorage = window.localStorage;
                var videoId = localStorage.getItem("videoId");
                var sliderValue = this.sliderValue;
                //不允许0时弹幕的存在，强制修改为1
                if(sliderValue===0){
                    sliderValue = 1;
                }
                var danmuContent = this.danmuContent;
                var self = this;
                var danmuShootDTO = new Object();
                danmuShootDTO.videoId = videoId;
                danmuShootDTO.sliderValue = sliderValue;
                danmuShootDTO.danmuContent = danmuContent;


                var random1to3 = self._createRandom1to3();
                if(random1to3===1){
                    danmuShootDTO.danmuColor = 'white';
                }

                if(random1to3===2){
                    danmuShootDTO.danmuColor = 'pink';
                }

                if(random1to3===2){
                    danmuShootDTO.danmuColor = 'yellow';
                }


                var random0to100 = Math.floor(Math.random()*98)+1;
                danmuShootDTO.top = random0to100;
                var random1to999 = Math.floor(Math.random()*998)+1;
                danmuShootDTO.danmuDelay = random1to999;
                self.$api.post('danmuController/danmuShoot',danmuShootDTO, result => {
                    //清空弹幕信息
                    self.danmuContent = "";
                    //self.res = result;
                });
            },
            _createRandom1to3(){
                //随机生成0到100的随机数
                var random0to100 = Math.floor(Math.random()*100);
                //如果随机数大于90，返回3
                if(random0to100>90)
                    return 3;
                //如果随机数大于80，返回2
                if(random0to100>80)
                    return 2;
                //否则返回1
                return 1;
            },
            doChangeScreenStatus(screenStatus){
                //screenStatus为true代表从半屏转全屏
                //screenStatus为false代表从全屏转半屏
                var self = this;
                if(screenStatus){
                    self.isScreenFull = true;
                }

                if(!screenStatus){
                    self.isScreenFull = false;
                }
                self.$emit('doChangeScreenStatus',screenStatus);
            }
        }
    }
</script>

<style scoped>
    .video-middle{
        width:999px;
        min-height:400px;
        margin:20px auto 40px auto;
    }

    .video-middle-left{
        width:640px;
        min-height:400px;
        float:left;
    }

    .video-middle-right{
        width:359px;
        min-height:1000px;
        float:left;
    }

    .video-middle-left-shipin{
        width:640px;
        min-height:400px;
    }

    .video-middle-left-pinglun{
        width:640px;
        min-height:600px;
        /*background-color:blue;*/
    }

    .video-middle-right-user-danmu-shipin{
        width:359px;
        min-height:450px;
        float:left;
        /*background-color:blue;*/
    }

    .video-middle-right-xiangguantuijian{
        width:345px;
        margin-left:15px;
        min-height:500px;
        float:left;
        /*background-color:yellow;*/
    }

    .video-screen-full{
        width:100% !important;
        height:100% !important;
        margin:auto auto !important;
    }

</style>
